<template>
  <div class="common-layout">
    <HeadContent title="人员排班设定"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="sizeSpace">
          <div class="flex flex-wrap gap-4">
            <el-card style="width: 1400px" shadow="hover">
              <el-form :model="form" :inline="true" class="demo-form-inline">
                <el-form-item label="排班类型">
                  <el-input v-model="form.deptName" />
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="部门">
                  <el-select v-model="form.deptName" placeholder="---请选择---">
                    <el-option v-for="item in deptInfo" :key="item.deptId" :label="item.deptName"
                      :value="item.deptId" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="QueryScheduleFn"><el-icon>
                      <Search />
                    </el-icon>&nbsp;查询</el-button>
                  <el-button type="primary" @click="resetForm"><el-icon>
                      <RefreshRight />
                    </el-icon>&nbsp;重置</el-button>
                  <!-- <el-button type="primary" @click="$router.push('/addrenyuanpaiban')"><el-icon>
                      <CirclePlus />

                    </el-icon>&nbsp;新增</el-button> -->

                </el-form-item>
              </el-form>
            </el-card>
          </div>

          <el-card style="width: 1400px" shadow="hover">
            <el-table :data="staffScheduleList" style="width: 100%">
              <el-table-column fixed prop="empId" label="编号" width="150" />
              <el-table-column prop="username" label="姓名" width="150" />
              <el-table-column prop="posName" label="职位" width="250" />
              <el-table-column prop="deptName" label="部门" width="150" />
              <el-table-column prop="type" label="考勤方式" width="150" />
              <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">

                  <el-button type="warning" plain @click="doDialogFormVisible(scope.row)">
                    <el-icon>
                      <Refresh />
                    </el-icon>&nbsp;修改
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 分页 -->

          <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
              :background="background" :disabled="disabled" layout="prev, pager, next, jumper" :total="1000"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </el-space>
      </el-main>
    </el-container>
  </div>
  <!--弹出框内容-->
  <el-dialog v-model="dialogFormVisible" title="修改排班" width="500">
    <el-form :model="updateform">
      <el-form-item label="员工编号" :label-width="formLabelWidth">
        <el-input v-model="updateform.empId" readonly />
      </el-form-item>

      <el-form-item label="排班类型" :label-width="formLabelWidth">
        <el-select v-model="form1.type" placeholder="请选择">
          <el-option v-for="item in scheduleList" :key="item.id" :label="item.type" :value="item.id" />

        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返回</el-button>
        <el-button type="primary" @click="handleSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  Refresh, Search, RefreshRight,

} from '@element-plus/icons-vue'
// const flag = ref<boolean>(true)
import TagComtent from '@/components/TagComtent.vue'
import { getScheduleList } from '@/api/schedule'
import type { schedule, } from '@/model'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const updateform = reactive({
  empId: 1,
  type: ''
})

const handleSubmit = async () => {
  try {
    // 提交更新
    await updateStaffSche(updateform);
  } catch (error) {
    console.error('更新或获取数据失败:', error);
    // 显示错误消息给用户
  }
}
function doDialogFormVisible(row: any) {
  dialogFormVisible.value = true
  updateform.empId = row.empId
  updateform.type = row.type
}

const staffScheduleList = ref<staffSchedule[]>([])
const getStaffScheduleFn = async () => {
  const res = await getStaffSchedule()
  staffScheduleList.value = res.data
  // console.log(staffScheduleList.value)
}
getStaffScheduleFn()

//绑定操作修改下拉框数据
const form1 = reactive({
  id:0,
  type:'',
  checkInTime:'',
  checkOutTime:''
})
const scheduleList = ref<schedule[]>([])
const getScheduleListFn = async () => {
  const res = await getScheduleList()
  scheduleList.value = res.data
  // console.log(staffScheduleList.value)
}
getScheduleListFn()



//查询功能

//绑定下拉框部门数据
const deptInfo = ref<DeptInfo[]>([])
const getDeptListInfoFn = async () => {
  const res = await getDeptListInfo()
  deptInfo.value = res.data

  console.log(deptInfo.value)
}
getDeptListInfoFn()


// const queryStaffSchedule = ref<QueryStaffSchedule>()
const form = ref({
  type: '',
  username: '',
  deptName: ''
})
const QueryScheduleFn = async () => {
  const res = await QuerySchedule(form.value.type, form.value.username, form.value.deptName)
  // queryStaffSchedule.value = res.data;

  staffScheduleList.value = res.data;

}

import HeadContent from '@/components/HeadContent.vue'
// do not use same name with ref


function resetForm() {
  form.value = {
    type: '',
    username: '',// 重置为初始状态或默认状态值,
    deptName: ''
  };
}

const sizeSpace = ref(40)

import type { ComponentSize } from 'element-plus'
import { getStaffSchedule, QuerySchedule, updateStaffSche } from '@/api/staffSchedule'
import type { DeptInfo, staffSchedule } from '@/model'
import { getDeptListInfo } from '@/api/dept'
const currentPage = ref(5)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
}
</style>
